import { Customer } from './Customer.jsx'
import { requestAdminlist, requestAddAdminlist, requestModifyAdmin, requestRemoveAdmin } from '../../api/admin'
import {
    Button,
    Drawer,
    Form,
    Input,
    Space,
    Table,
    Tag,
    Switch,
    TreeSelect,
    message,
    Popconfirm,
    Spin,
} from 'antd'
import React from 'react'

import routes from '../../router/routes'
import QueueAnim from 'rc-queue-anim'
import { connect } from 'react-redux'

export class Admin extends Customer {
    init () {
        const current = sessionStorage.getItem('current')
        const type = sessionStorage.getItem('type')
        requestAdminlist().then(res => {
            this.setState({
                // eslint-disable-next-line
                dataList: res.data.filter(item => {
                    if (type === 'true') {
                        if (!item.type) {
                            return item
                        }
                    } else {
                        if (item.adminname === current) {
                            return item
                        }
                    }
                }),
                loading: false
            })
        })
    }

    onFinish (values) {
        let { mode, _id } = this.state
        if (sessionStorage.getItem('type') === 'true' && !values.author.includes('0-0-0')) {
            message.warn('主页数据分析权限需要给丫~')
            return
        }
        switch (mode) {
            case 'edit':
                console.log('edit', _id, values)
                requestModifyAdmin(_id, values).then(res => {
                    message.success(res.msg)
                    this.init()
                })
                break
            case 'add':
                console.log('add', values)
                requestAddAdminlist(values).then(res => {
                    console.log(res)
                    if (res.code === 200) {
                        message.success('管理员添加成功')
                        this.init()
                    } else {
                        message.warn('此管理员已经存在')
                    }
                })
                break
            default:
                console.log('暂时没有这个策略')
        }
    }

    delete (id) {
        console.log(id)
        requestRemoveAdmin(id).then(res => {
            message.success(res.msg)
            this.init()
        })
    }

    render () {
        const columns = [
            {
                title: '用户名',
                dataIndex: 'adminname',
                key: 'adminname',
                ...this.getColumnSearchProps('adminname', '请输入用户名'),
                // eslint-disable-next-line
                render: text => <a>{text}</a>,
            },
            {
                title: '密码',
                dataIndex: 'password',
                key: 'password',
                render: (text, record) => (record.type ? <label>******</label> : <label>{text}</label>)
            },
            {
                title: '类型',
                key: 'tags',
                dataIndex: 'type',
                render: (text) => (
                    text ? <Tag color="volcano">
                        超级管理员
                    </Tag> : <Tag color="gold">
                        管理员
                    </Tag>
                ),
            },
            {
                title: '状态',
                key: 'freeze',
                dataIndex: 'freeze',
                render: (text) => (
                    text ? (<Tag color="red">
                        冻结
                    </Tag>) : (<Tag color="green">
                        正常
                    </Tag>)
                ),
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Space size="middle">
                        {/*eslint-disable-next-line*/}
                        <a onClick={this.edit.bind(this, record)}>编辑</a>
                        <Popconfirm onConfirm={this.delete.bind(this, record._id)} title="确认删除？">
                            {/*eslint-disable-next-line*/}
                            <a style={{ color: '#FF4D4F' }}>注销</a>
                        </Popconfirm>
                    </Space>
                ),
            },
        ]
        let element = null
        if (this.state.loading) {
            element = (<div className="loading">
                <Spin tip="Loading..." spinning={this.state.loading} size="large"/>
            </div>)
        } else {
            element = (
                <>
                    {sessionStorage.getItem('type') === 'true' ? <Space style={{ width: '100%' }}
                                                                        direction={'vertical'}>
                        <Button type="primary" onClick={this.add.bind(this)}>添加管理员</Button>
                        <Table style={{ width: '100%' }} scroll={{ y: this.state.tableHeight }} className="userTable"
                               dataSource={this.state.dataList}
                               columns={columns} rowKey={record => record._id}/>
                    </Space> : <Table style={{ width: '100%' }} scroll={{ y: this.state.tableHeight }}
                                      className="userTable"
                                      dataSource={this.state.dataList}
                                      columns={columns} rowKey={record => record._id}/>}

                    <Drawer width={500} visible={this.state.editVisible} title="添加/编辑" placement="right"
                            onClose={this.onClose.bind(this)} footer={null}>
                        <Form
                            name="basic"
                            labelCol={{ span: 4 }}
                            initialValues={{ remember: true }}
                            onFinish={this.onFinish.bind(this)}
                            autoComplete="off"
                            ref={this.state.formRef}
                        >
                            <Form.Item
                                label="用户名"
                                name="adminname"
                                rules={[{ required: true, message: '请输入用户名' }]}
                            >
                                <Input/>
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入密码' }]}
                            >
                                <Input/>
                            </Form.Item>

                            {sessionStorage.getItem('type') === 'true' ? <><Form.Item
                                label="超管"
                                name="type"
                                valuePropName="checked"
                                initialValue={false}
                            >
                                <Switch/>
                            </Form.Item>

                                <Form.Item
                                    label="冻结"
                                    name="freeze"
                                    valuePropName="checked"
                                    initialValue={false}
                                >
                                    <Switch/>
                                </Form.Item>

                                <Form.Item label="权限" name="author" initialValue={['0-0-0']}>
                                    <TreeSelect
                                        treeCheckable={true}
                                        treeData={routes()}
                                    />
                                </Form.Item></> : null}

                            <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                                <Space>
                                    <Button type="primary" htmlType="submit">提交</Button>
                                </Space>
                            </Form.Item>
                        </Form>
                    </Drawer>
                </>
            )
        }

        return (<QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a">{element}</div> : null}
        </QueueAnim>)
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Admin)

